<template>

  <a-modal v-model:open="visible" :title="title" :width="width" @ok="handleSubmit" @cancel="handleCancel" destroyOnClose :footer="footer">
   <div class="forms">
    <a-form :model="formState"  :layout="'vertical'" style="padding:0 30px;" >
      <a-form-item label="实验课班级">
        <a-input v-model="formState.courseName" />
      </a-form-item>
      <a-form-item label="学生姓名">
        <a-input v-model="formState.studentName" />
      </a-form-item>
     
      <a-form-item label="学号">
        <a-input v-model="formState.studentNumber" />
      </a-form-item>
     <a-form-item label="作业所属课程">
        <a-input v-model="formState.courseName" />
      </a-form-item>
        <a-form-item label="AI评测结果">
        <a-input v-model="formState.age" />
      </a-form-item>
      <a-form-item label="教师打分">
        <a-input v-model="formState.score" v-if="types===1" />
        <a-input placeholder="请打分"  v-model="formState.score" v-else />
      </a-form-item>
    </a-form>
     <div class="note">注：满分100分，60分及格</div>
    </div>
  <template #footer >
            <a-button type="primary" @click="submit">保存</a-button>
            <a-button key="back" @click="closeModal">
                取消
            </a-button>
        </template>


  
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed } from 'vue';
   import { Form, Input } from 'ant-design-vue';


  // 定义 props
  const props = defineProps({
    title: {
      type: String,
      default: '评测结果',
    },
    width: {
      type: Number,
      default: 700,
    },
    types:{
      type:Number, //1上传(assignSubmit)  2打分(assignScore)
      default:1
    },
   
  });
   const footer = computed(()=>props.types==1 ? null :undefined)
 
  // 定义 emits
  const emit = defineEmits(['submit', 'cancel']);

  // 模态框显示状态
  const visible = ref<boolean>(false);

  // 表单数据
  const formState = reactive({
    className:'',
    studentName:'',
    studentNumber:'',
    score:'',
    courseName:''

  });
  const closeModal = ()=>{
    visible.value = false
  }

  // 打开模态框
  const openModel = () => {
    visible.value = true;
  };

  // 提交表单
  const handleSubmit = () => {
    emit('submit', formState);
    visible.value = false;
  };

  // 取消
  const handleCancel = () => {
    emit('cancel');
    visible.value = false;
  };

  // 暴露方法给父组件
  defineExpose({
    openModel,
  });
</script>
<style scoped lang="less">
.forms{
  padding-bottom: 20px;
  padding-top: 10px;
}
.note{
  color:red;
  margin-left: 25px;
}

</style>
